<script setup>
import {DeleteOutlined, HighlightOutlined, DeliveredProcedureOutlined} from '@ant-design/icons-vue';
import {reactive, ref} from 'vue';

const columns = [
  {
    title: 'realName',
    dataIndex: 'realName',
    width: '10%',
  },
  {
    title: 'title',
    dataIndex: 'title',
    width: '10%',
  },
  {
    title: 'eduHistory',
    dataIndex: 'eduHistory',
    width: '15%',
  },
  {
    title: 'diploma',
    dataIndex: 'diploma',
    width: '15%',
  },
  {
    title: 'birth',
    dataIndex: 'birth',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: '150px',
  },
];
const data = [];
for (let i = 0; i < 100; i++) {
  let user = {};
  user.realName = i + "_user";
  user.title = "教师";
  user.eduHistory = "研究生";
  user.diploma = "博士";
  user.birth = "1888-8-8";
  user.faceImg = "/upload/1.jpg";
  user.tableKey = "xxx-xxx-xx-xx"

  data.push(user);
}
const dataSource = ref(data);


function recordClick(recordData) {
  console.log(recordData);
}
</script>

<template>
  <div class="container">


    <a-table :columns="columns" :data-source="dataSource">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-tag class="tagBtn" style="background: #f00" title="删除" @click="recordClick(record)">
            <DeleteOutlined/>
          </a-tag>

          <a-tag class="tagBtn" style="background: #1c3567" title="编辑" @click="recordClick(record)">
            <HighlightOutlined/>
          </a-tag>

          <a-tag class="tagBtn" style="background: #d18700" title="移动" @click="recordClick(record)">
            <DeliveredProcedureOutlined/>
          </a-tag>
        </template>
      </template>
    </a-table>
  </div>
</template>

<style scoped>
.tagBtn {
  cursor: pointer;
  color: #fff;
}
.container{
  background: #fff;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>